<template>
  <el-button type="primary" @click="dialogVisible = true">
    查看订单
  </el-button>

  <el-dialog v-model="dialogVisible" title="查看订单" width="800" destroy-on-close append-to-body>
    <el-descriptions title="基本信息" border column="5" direction="vertical" class="descriptions-item">
      <el-descriptions-item label="订单编号">{{ orderInfo.orderNumber }}</el-descriptions-item>
      <el-descriptions-item label="用户账号">{{ orderInfo.wxUserPhoneNumber }}</el-descriptions-item>
      <el-descriptions-item label="支付状态">
        <el-tag type="success" v-show="orderInfo.orderStatus === OrderStatusEnum.SUCCESS">支付成功</el-tag>
        <el-tag type="info" v-show="orderInfo.orderStatus === OrderStatusEnum.PENDING_PAYMENT">待支付</el-tag>
        <el-tag type="danger" v-show="orderInfo.orderStatus === OrderStatusEnum.FAILURE">支付失败</el-tag>
        <el-tag type="warning" v-show="orderInfo.orderStatus === OrderStatusEnum.CANCELED">超时取消</el-tag>
        <el-tag v-show="orderInfo.orderStatus === OrderStatusEnum.PENDING_DELIVER">待发货</el-tag>
        <el-tag type="info" v-show="orderInfo.orderStatus === OrderStatusEnum.PENDING_RECEIVED">已发货</el-tag>
        <el-tag type="info" v-show="orderInfo.orderStatus === OrderStatusEnum.COMPLETED">订单完成</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="销售人">{{ orderInfo.salesman ? orderInfo.salesman : '--' }}</el-descriptions-item>
      <el-descriptions-item label="物流单号">{{ orderInfo.trackingNumber ? orderInfo.trackingNumber : '--' }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="发票信息" border column="4" direction="vertical" class="descriptions-item">
      <el-descriptions-item label="发票类型">
        {{ orderInfo.orderProductInvoiceInfo?.invoiceType === InvoiceTypeEnum.SPECIAL ? '专用发票' : '电子普通发票' }}
      </el-descriptions-item>
      <el-descriptions-item label="发票抬头">{{ orderInfo.orderProductInvoiceInfo?.invoiceTitle }}</el-descriptions-item>
      <el-descriptions-item label="发票内容">{{ orderInfo.orderProductInvoiceInfo?.invoiceContent }}</el-descriptions-item>
      <el-descriptions-item label="收票信息">{{ orderInfo.orderProductInvoiceInfo?.mailbox }}</el-descriptions-item>
    </el-descriptions>
    <!-- <el-descriptions title="绑定孩子信息" border column="5" direction="vertical" class="descriptions-item" v-show="orderInfo.studentDetailsInfo?.studentId">
      <el-descriptions-item label="姓名" span="1">{{ orderInfo.studentDetailsInfo?.idName }}</el-descriptions-item>
      <el-descriptions-item label="性别" span="1">{{ orderInfo.studentDetailsInfo.gender? orderInfo.studentDetailsInfo.gender === "man" ? "男" : "女" : '-'}}</el-descriptions-item>
      <el-descriptions-item label="身份证号" span="1">{{ orderInfo.studentDetailsInfo?.idNumber }}</el-descriptions-item>
      <el-descriptions-item label="身高（cm）" span="1">{{ orderInfo.studentDetailsInfo?.height }}</el-descriptions-item>
      <el-descriptions-item label="体重（kg）" span="1">{{ orderInfo.studentDetailsInfo?.weight }}</el-descriptions-item>
    </el-descriptions> -->
    <el-descriptions title="收货人信息" border column="4" direction="vertical" class="descriptions-item">
      <el-descriptions-item label="收货人" span="1">{{ orderInfo.receiverInfo?.receiverIdName }}</el-descriptions-item>
      <el-descriptions-item label="手机号码" span="1">{{ orderInfo.receiverInfo?.receiverPhoneNumber }}</el-descriptions-item>
      <el-descriptions-item label="收件地址" span="2">
        {{ orderInfo.receiverInfo?.receiverArea }} {{ orderInfo.receiverInfo?.receiverAddress }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="商品信息" border column="6" direction="vertical" class="descriptions-item">
      <el-descriptions-item label="商品图片">
        <img :src="orderInfo.simpleProductInfo?.spuPhoto" alt="" class="descriptions-item-img">
      </el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ orderInfo.simpleProductInfo?.spuName }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ orderInfo.simpleProductInfo?.transactionPrice }}</el-descriptions-item>
      <el-descriptions-item label="品牌">{{ orderInfo.simpleProductInfo?.spuBrand }}</el-descriptions-item>
      <el-descriptions-item label="属性" v-show="hasSku(orderInfo.simpleProductInfo?.skuSpec)">
        {{ getAttrInfo(orderInfo.simpleProductInfo?.skuSpec) }}
      </el-descriptions-item>
      <el-descriptions-item label="数量">{{ orderInfo.simpleProductInfo?.transactionCount }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { OrderStatusEnum, InvoiceTypeEnum } from './config'

const hasSku = (skuSpec: string) => {
  if(!skuSpec) return false
  try {
    if(skuSpec.length > 0) {
      return true
    }
  }catch {
    return false
  }
}
const props = defineProps(["orderInfo"])
const dialogVisible = ref(false)

const orderInfo = computed(() => {
  return props.orderInfo || {}
})

const getAttrInfo = (infoStr: string) => {
  if (!infoStr) return ''
  try {
    const item = JSON.parse(infoStr)
    return item.map((i: any) => i.attrValue).join('-')
  } catch {
    return '-'
  }
}

</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.descriptions-item {
  margin-bottom: 20px;

  &-img {
    width: 200px;
    height: 200px;
  }
}
</style>
